<template>
  <div class="page-header-index-wide">
    <a-row v-if="orderStatistics && isSupperAdmin" :gutter="24">
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="总销售额" :total="'￥' + orderStatistics.totalOrderAmount">
          <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div v-if="false">
            <trend flag="up" style="margin-right: 16px;">
              <span slot="term">周同比</span>
              12%
            </trend>
            <trend flag="down">
              <span slot="term">日同比</span>
              11%
            </trend>
          </div>
          <template slot="footer"
            >今日销售额：<span>￥{{ orderStatistics.dayTotalOrderAmount | NumberFormat }}</span></template
          >
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="总订单量" :total="orderStatistics.totalOrderNums | NumberFormat">
          <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div v-if="false">
            <mini-area />
          </div>
          <template slot="footer"
            >今日订单量：<span> {{ orderStatistics.dayTotalOrderNums | NumberFormat }}</span></template
          >
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="总支付笔数" :total="orderStatistics.totalPaidOrderNums | NumberFormat">
          <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div v-if="false">
            <mini-bar :height="40" />
          </div>
          <template slot="footer"
            >今日支付 <span>{{ orderStatistics.dayTotalPaidOrderNums | NumberFormat }}</span></template
          >
        </chart-card>
      </a-col>
      <a-col v-if="userStatistics" :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" :title="onlineUserTotalCount">
          <!-- <chart-card :loading="loading" title="用户统计"> -->
          <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div class="user-statistics-container">
            <div>
              <h4>平台会员：{{ userStatistics.memberCount }}</h4>
              <h4>平台商户：{{ userStatistics.merchantCount }}</h4>
              <h4>评估机构：{{ userStatistics.evaluationAgencyCount }}</h4>
            </div>
            <div>
              <h4>问答专家：{{ userStatistics.forumsExpertCount }}</h4>
              <h4>联盟机构：{{ userStatistics.allianceCount }}</h4>
              <h4>联盟机构成员：{{ userStatistics.allianceMemberCount }}</h4>
            </div>
          </div>
          <template slot="footer">今日新增：{{ userStatistics.dayTotal }}</template>
        </chart-card>
      </a-col>
      <a-col v-if="false" :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="运营活动效果" total="78%">
          <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <mini-progress color="rgb(19, 194, 194)" :target="80" :percentage="78" :height="8" />
          </div>
          <template slot="footer">
            <trend flag="down" style="margin-right: 16px;">
              <span slot="term">同周比</span>
              12%
            </trend>
            <trend flag="up">
              <span slot="term">日环比</span>
              80%
            </trend>
          </template>
        </chart-card>
      </a-col>
    </a-row>

    <a-row>
      <a-col :span="24">
        <a-card :loading="loading" :bordered="false" :body-style="{ padding: '0' }">
          <div>
            <div class="section-header">
              <h3>销售统计</h3>
            </div>
            <div class="filter-bar-wrapper">
              <order-sales-filter-bar
                @dateChange="orderSalesDateChange"
                @itemClick="orderSalesFilterClick"
              ></order-sales-filter-bar>
            </div>
            <a-row v-if="orderSalesStatistics">
              <a-col class="sales-amount-card-col">
                <bar class="sales-amount-card" :fields="orderSalesFields" :dataSource="orderSalesStatistics" />
              </a-col>
            </a-row>
          </div>
        </a-card>
      </a-col>
    </a-row>
    <a-row v-if="isSupperAdmin">
      <a-col :span="24">
        <a-card :loading="loading" :bordered="false" :style="{ marginTop: '24px' }" :body-style="{ padding: '0' }">
          <div>
            <div class="section-header">
              <h3>平台访问统计</h3>
            </div>

            <div class="filter-bar-wrapper">
              <filter-bar
                :dateRangeString.sync="platformVisitDateString"
                @dateChange="platfromVisitDateChange"
                @itemClick="platformVisitFilterClick"
              ></filter-bar>
            </div>

            <a-tabs default-active-key="1" @change="platformVisitTabChange">
              <a-tab-pane key="1" tab="用户访问">
                <div>
                  <a-row v-if="platformVisitStatistics">
                    <a-col class="platform-visit-col" :span="6">
                      <head-info
                        v-if="platformVisitPVTimeRangeTitle"
                        :title="platformVisitPVTimeRangeTitle"
                        :content="platformVisitStatistics.pvTimeRangeCount | NumberFormat"
                      ></head-info>
                    </a-col>

                    <a-col class="platform-visit-col" :span="6">
                      <head-info
                        v-if="platformVisitUVTimeRangeTitle"
                        :title="platformVisitUVTimeRangeTitle"
                        :content="platformVisitStatistics.uvTimeRangeCount | NumberFormat"
                      ></head-info>
                    </a-col>

                    <a-col class="platform-visit-col" :span="6">
                      <head-info
                        v-if="platformRevisitUVTimeRangeTitle"
                        :title="platformRevisitUVTimeRangeTitle"
                        :content="platformVisitStatistics.uvRevisitTimeRangeCount | NumberFormat"
                      ></head-info>
                    </a-col>

                    <a-col class="platform-visit-col" :span="6">
                      <head-info
                        v-if="platformRevisitUVTimeRangeRateTitle"
                        :title="platformRevisitUVTimeRangeRateTitle"
                        :content="platformVisitStatistics.uvTimeRangeRevisitRate | NumberFormat"
                      ></head-info>
                    </a-col>

                    <a-col class="platform-visit-col" :span="6">
                      <head-info
                        title="总访问量"
                        :content="platformVisitStatistics.pvTotalCount | NumberFormat"
                      ></head-info>
                    </a-col>

                    <a-col class="platform-visit-col" :span="6">
                      <head-info
                        title="总访客量"
                        :content="platformVisitStatistics.uvTotalCount | NumberFormat"
                      ></head-info>
                    </a-col>
                    <a-col class="platform-visit-col" :span="6">
                      <head-info
                        title="复访客量"
                        :content="platformVisitStatistics.uvRevisitTotalCount | NumberFormat"
                      ></head-info>
                    </a-col>

                    <a-col class="platform-visit-col" :span="6">
                      <head-info
                        title="复访率"
                        :content="platformVisitStatistics.uvRevisitRate | NumberFormat"
                      ></head-info>
                    </a-col>
                  </a-row>

                  <line-chart-multid
                    v-if="platformVisitData"
                    :fields="platformVisitFields"
                    :aliases="platformVisitAliases"
                    :dataSource="platformVisitData"
                  ></line-chart-multid>
                </div>
              </a-tab-pane>
              <a-tab-pane v-if="platformVisitUserDistribution" key="2" tab="用户分布" force-render>
                <a-table
                  :columns="platformUserDistributionColumns"
                  :row-key="record => record.provinceId"
                  :data-source="platformVisitUserDistribution"
                  :pagination="pagination"
                  :loading="loading"
                  @change="handlePlatformVisitUserDistributionTableChange"
                >
                </a-table>
              </a-tab-pane>
              <a-tab-pane v-if="platformVisitClientDistribution" key="3" tab="系统分布" force-render>
                <a-table
                  :columns="platformClientDistributionColumns"
                  :row-key="record => record.clientOs"
                  :data-source="platformVisitClientDistribution"
                  :pagination="pagination"
                  :loading="loading"
                  @change="handlePlatformVisitClientDistributionTableChange"
                >
                </a-table>
              </a-tab-pane>
            </a-tabs>
          </div>
        </a-card>
      </a-col>
    </a-row>

    <a-row v-if="isSupperAdmin">
      <a-col :span="24">
        <a-card :loading="loading" :bordered="false" :style="{ marginTop: '24px' }" :body-style="{ padding: '0' }">
          <div>
            <div class="section-header">
              <h3>商家访问统计</h3>
            </div>

            <div class="filter-bar-wrapper">
              <filter-bar
                :dateRangeString.sync="backendVisitDateString"
                @dateChange="backendVisitDateChange"
                @itemClick="backendVisitFilterClick"
              ></filter-bar>
            </div>

            <a-tabs default-active-key="1" @change="backendVisitTabChange">
              <a-tab-pane v-if="backendVisitDistributionList" key="2" tab="店铺访问" force-render>
                <a-table
                  :columns="backendDistributionColumns"
                  :row-key="record => record.shopId"
                  :data-source="backendVisitDistributionList"
                  :pagination="pagination"
                  :loading="loading"
                >
                </a-table>
              </a-tab-pane>
            </a-tabs>
          </div>
        </a-card>
      </a-col>
    </a-row>

    <a-row v-if="isSupperAdmin">
      <a-col :span="24">
        <a-card :loading="loading" :bordered="false" :style="{ marginTop: '24px' }" :body-style="{ padding: '0' }">
          <div>
            <div class="section-header">
              <h3>商品访问统计</h3>
            </div>

            <div class="filter-bar-wrapper">
              <filter-bar
                :dateRangeString.sync="goodsDetailVisitDateString"
                @dateChange="goodsDetailVisitDateChange"
                @itemClick="goodsDetailVisitFilterClick"
              ></filter-bar>
            </div>

            <div>
              <a-row v-if="goodsDetailVisitStatistics">
                <a-col class="goods-detail-visit-col" :span="6">
                  <head-info
                    v-if="goodsDetailCartClickThroughTimeRangeRateTitle"
                    :title="goodsDetailCartClickThroughTimeRangeRateTitle"
                    :content="goodsDetailVisitStatistics.cartClickThroughTimeRangeRate | NumberFormat"
                  ></head-info>
                </a-col>

                <a-col class="goods-detail-visit-col" :span="6">
                  <head-info
                    v-if="goodsDetailImmediatelyPurchaseClickThroughTimeRangeRateTitle"
                    :title="goodsDetailImmediatelyPurchaseClickThroughTimeRangeRateTitle"
                    :content="goodsDetailVisitStatistics.immediatelyPurchaseClickThroughTimeRangeRate | NumberFormat"
                  ></head-info>
                </a-col>

                <a-col class="goods-detail-visit-col" :span="6">
                  <head-info
                    v-if="goodsDetailTurnoverRimeRangeRatioTitle"
                    :title="goodsDetailTurnoverRimeRangeRatioTitle"
                    :content="goodsDetailVisitStatistics.turnoverRatioTimeRangeRate | NumberFormat"
                  ></head-info>
                </a-col>

                <a-col class="goods-detail-visit-col" :span="6">
                  <head-info
                    title="加入购物车点击率"
                    :content="goodsDetailVisitStatistics.cartClickThroughTimeRangeRate | NumberFormat"
                  ></head-info>
                </a-col>

                <a-col class="goods-detail-visit-col" :span="6">
                  <head-info
                    title="立即购买点击率"
                    :content="goodsDetailVisitStatistics.immediatelyPurchaseClickThroughRate | NumberFormat"
                  ></head-info>
                </a-col>
                <a-col class="goods-detail-visit-col" :span="6">
                  <head-info
                    title="成交率"
                    :content="goodsDetailVisitStatistics.turnoverRatioRate | NumberFormat"
                  ></head-info>
                </a-col>
              </a-row>

              <line-chart-multid
                v-if="goodsDetailVisitData"
                :fields="goodsDetailVisitFields"
                :aliases="goodsDetailVisitAliases"
                :dataSource="goodsDetailVisitData"
              ></line-chart-multid>
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import ChartCard from '@/components/ChartCard'
import ACol from 'ant-design-vue/es/grid/Col'
import ATooltip from 'ant-design-vue/es/tooltip/Tooltip'
import MiniArea from '@/components/chart/MiniArea'
import MiniBar from '@/components/chart/MiniBar'
import MiniProgress from '@/components/chart/MiniProgress'
import RankList from '@/components/chart/RankList'
import Bar from '@/components/chart/Bar'
import LineChartMultid from '@/components/chart/LineChartMultid'
import HeadInfo from '@/components/tools/HeadInfo.vue'
import FilterBar from './components/FilterBar.vue'
import OrderSalesFilterBar from './components/OrderSalesFilterBar.vue'
import { mapState, mapActions, mapGetters } from 'vuex'

import Trend from '@/components/Trend'
import { getLoginfo, getVisitInfo } from '@/api/api'

const rankList = []
for (let i = 0; i < 7; i++) {
  rankList.push({
    name: '白鹭岛 ' + (i + 1) + ' 号店',
    total: 1234.56 - i * 100
  })
}
const barData = []
for (let i = 0; i < 12; i += 1) {
  barData.push({
    x: `${i + 1}月`,
    y: Math.floor(Math.random() * 1000) + 200
  })
}

export default {
  name: 'IndexChart',
  mixins: [],
  components: {
    ATooltip,
    ACol,
    ChartCard,
    MiniArea,
    MiniBar,
    MiniProgress,
    RankList,
    Bar,
    Trend,
    LineChartMultid,
    HeadInfo,
    FilterBar,
    OrderSalesFilterBar
  },
  data() {
    return {
      loading: true,
      center: null,
      rankList,
      barData,
      loginfo: {},
      platformVisitFields: ['pv', 'uv'],
      platformVisitAliases: [
        { field: 'pv', alias: 'pv(访问量)' },
        { field: 'uv', alias: 'uv(访客量)' }
      ],

      goodsDetailVisitFields: ['pv', 'uv'],
      goodsDetailVisitAliases: [
        { field: 'pv', alias: 'pv(访问量)' },
        { field: 'uv', alias: 'uv(访客量)' }
      ],

      platformVisitSelectedItem: undefined,
      platformVisitDateString: [],

      goodsDetailVisitSelectedItem: undefined,
      goodsDetailVisitDateString: [],

      backendVisitSelectedItem: undefined,
      backendVisitDateString: [],
      orderSalesDateString: [],
      orderSalesFields: ['x', 'y'],

      platformUserDistributionColumns: [
        {
          title: '排名',
          dataIndex: '',
          key: 'rowIndex',
          align: 'center',
          customRender: function(t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '区域',
          dataIndex: 'provinceName',
          align: 'center'
        },
        {
          title: '访问量',
          dataIndex: 'provincePVCount',
          align: 'center'
        },
        {
          title: '访客量',
          dataIndex: 'provinceUVCount',
          align: 'center'
        },

        {
          title: '总浏览时长（秒）',
          dataIndex: 'provinceTotalBrowseTime',
          align: 'center'
        },
        {
          title: '平均浏览时长（秒）',
          dataIndex: 'provinceAverageBrowseTime',
          align: 'center'
        }
      ],

      platformClientDistributionColumns: [
        {
          title: '排名',
          dataIndex: '',
          key: 'rowIndex',
          align: 'center',
          customRender: function(t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '操作系统',
          dataIndex: 'clientOsString',
          align: 'center'
        },
        {
          title: '访问量',
          dataIndex: 'clientPVCount',
          align: 'center'
        },
        {
          title: '访客量',
          dataIndex: 'clientUVCount',
          align: 'center'
        },

        {
          title: '总浏览时长（秒）',
          dataIndex: 'clientTotalBrowseTime',
          align: 'center'
        },
        {
          title: '平均浏览时长（秒）',
          dataIndex: 'clientAverageBrowseTime',
          align: 'center'
        }
      ],

      backendDistributionColumns: [
        {
          title: '排名',
          dataIndex: '',
          key: 'rowIndex',
          align: 'center',
          // sorter: true,
          customRender: function(t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '店铺名称',
          dataIndex: 'shopName',
          align: 'center',
          customRender: function(text) {
            return text ? text : '--'
          }
        },
        {
          title: '访问次数',
          dataIndex: 'shopPVCount',
          align: 'center'
          // sorter: true
        },

        {
          title: '总浏览时长（秒）',
          dataIndex: 'shopTotalBrowseTime',
          align: 'center'
          // sorter: true
        },
        {
          title: '平均浏览时长（秒）',
          dataIndex: 'shopAverageBrowseTime',
          align: 'center'
          // sorter: true
        }
      ],
      pagination: undefined,

      indicator: <a-icon type="loading" style="font-size: 24px" spin />
    }
  },
  computed: {
    ...mapState('platformVisit', {
      platformVisitData: state => state.pvuvData,
      platformVisitStatistics: state => state.statistics,
      platformVisitUserDistribution: state => state.userDistribution,
      platformVisitClientDistribution: state => state.clientDistribution
    }),

    ...mapState('onlineUser', {
      onlineUserTotal: state => state.total
    }),

    ...mapState('goodsDetailVisit', {
      goodsDetailVisitData: state => state.pvuvData,
      goodsDetailVisitStatistics: state => state.statistics,
      goodsDetailVisitDistributionList: state => state.distributionList
    }),

    ...mapState('rolePermission', {
      userPermission: state => state.userPermission
    }),

    ...mapState('backendVisit', {
      backendVisitDistributionList: state => state.distributionList
    }),

    ...mapState('account', {
      userStatistics: state => state.statistics
    }),

    ...mapState('order', {
      orderStatistics: state => state.statistics,
      orderSalesStatistics: state => state.salesStatistics
    }),

    onlineUserTotalCount() {
      return '用户统计: (在线人数：' + this.onlineUserTotal + ')'
    },

    platformVisitPVTimeRangeTitle() {
      return this.platformVisitSelectedItem ? this.platformVisitSelectedItem.title + '访问量' : '--'
    },
    platformVisitUVTimeRangeTitle() {
      return this.platformVisitSelectedItem ? this.platformVisitSelectedItem.title + '访客量' : '--'
    },
    platformRevisitUVTimeRangeTitle() {
      return this.platformVisitSelectedItem ? this.platformVisitSelectedItem.title + '复访客量' : '--'
    },
    platformRevisitUVTimeRangeRateTitle() {
      return this.platformVisitSelectedItem ? this.platformVisitSelectedItem.title + '复访率' : '--'
    },

    goodsDetailCartClickThroughTimeRangeRateTitle() {
      return this.goodsDetailVisitSelectedItem ? this.goodsDetailVisitSelectedItem.title + '加入购物车点击率' : '--'
    },

    goodsDetailImmediatelyPurchaseClickThroughTimeRangeRateTitle() {
      return this.goodsDetailVisitSelectedItem ? this.goodsDetailVisitSelectedItem.title + '立即购买点击率' : '--'
    },

    goodsDetailTurnoverRimeRangeRatioTitle() {
      return this.goodsDetailVisitSelectedItem ? this.goodsDetailVisitSelectedItem.title + '成交率' : '--'
    },
    isSupperAdmin() {
      const info = this.userPermission
      return info && info.roleCodeEnum === 'ROLE_SYS_USER' ? true : false
    }
  },

  created() {
    setTimeout(() => {
      this.loading = !this.loading
    }, 1000)

    this.initLogInfo()
    this.updateData()
    this.getUserPermission()
  },
  methods: {
    getUserPermission() {
      this.$store
        .dispatch('rolePermission/getUserPermissionAction')
        .then(() => {})
        .catch(() => {})
    },

    getOnlineUser() {
      this.$store
        .dispatch('onlineUser/getListAction')
        .then(() => {})
        .catch(() => {})
    },

    initLogInfo() {
      getLoginfo(null).then(res => {
        if (res.success) {
          Object.keys(res.result).forEach(key => {
            res.result[key] = res.result[key] + ''
          })
          this.loginfo = res.result
        }
      })
      getVisitInfo().then(res => {
        if (res.success) {
          this.visitInfo = res.result
        }
      })
    },

    updateData() {
      this.getUserStatistics()
      this.getOrderStatistics()
      // this.getOrderSalesStatistics()
      this.getGoodsDetailVisitStatistics()
      this.getPlatformVisitStatistics()
      this.getPlatformVisitUserDistribution()
      this.getPlatformVisitClientDistribution()
      this.getOnlineUser()
    },

    getUserStatistics() {
      this.$store
        .dispatch('account/getStatisticsAction')
        .then(() => {})
        .catch(() => {})
    },

    getPlatformVisitStatistics(parameters) {
      this.$store
        .dispatch('platformVisit/getStatisticsAction', parameters)
        .then(() => {})
        .catch(() => {})
    },

    getGoodsDetailVisitStatistics(parameters) {
      this.$store
        .dispatch('goodsDetailVisit/getStatisticsAction', parameters)
        .then(() => {})
        .catch(() => {})
    },

    getPlatformVisitPVUVData(parameters) {
      this.$store
        .dispatch('platformVisit/getPVUVDataAction', parameters)
        .then(() => {})
        .catch(() => {})
    },

    getGoodsDetailVisitStatistics(parameters) {
      this.$store
        .dispatch('goodsDetailVisit/getStatisticsAction', parameters)
        .then(() => {})
        .catch(() => {})
    },

    getGoodsDetailVisitPVUVData(parameters) {
      this.$store
        .dispatch('goodsDetailVisit/getPVUVDataAction', parameters)
        .then(() => {})
        .catch(() => {})
    },

    getPlatformVisitUserDistribution(parameters) {
      this.$store
        .dispatch('platformVisit/getUserDistributionAction', parameters)
        .then(() => {})
        .catch(() => {})
    },

    getPlatformVisitClientDistribution(parameters) {
      this.$store
        .dispatch('platformVisit/getClientDistributionAction', parameters)
        .then(() => {})
        .catch(() => {})
    },

    getBackendVisitDistribution(parameters) {
      this.$store
        .dispatch('backendVisit/getDistributionAction', parameters)
        .then(() => {})
        .catch(() => {})
    },

    getOrderStatistics() {
      this.$store
        .dispatch('order/getStatisticsAction')
        .then(() => {})
        .catch(() => {})
    },

    getOrderSalesStatistics(parameters) {
      this.$store
        .dispatch('order/getSalesStatisticsAction', parameters)
        .then(() => {})
        .catch(() => {})
    },

    platfromVisitDateChange(date, dateString) {
      if (date && Array.isArray(date) && date.length > 0) {
        this.updatePlatformVisitData()
      }
    },

    goodsDetailVisitDateChange(date, dateString) {
      if (date && Array.isArray(date) && date.length > 0) {
        this.updateGoodsDetailVisitData()
      }
    },

    backendVisitDateChange(date, dateString) {
      if (date && Array.isArray(date) && date.length > 0) {
        const parameters = {
          beginTime: dateString[0],
          endTime: dateString[1]
        }

        console.log('\n\n parameters:' + JSON.stringify(parameters) + '\n\n')

        this.getBackendVisitDistribution(parameters)
      }
    },
    updatePlatformVisitData() {
      const dateString = this.platformVisitDateString
      const parameters = {
        beginTime: dateString[0],
        endTime: dateString[1]
      }

      this.getPlatformVisitPVUVData(parameters)
      this.getPlatformVisitStatistics(parameters)
    },

    updateGoodsDetailVisitData() {
      const dateString = this.platformVisitDateString
      const parameters = {
        beginTime: dateString[0],
        endTime: dateString[1]
      }

      this.getGoodsDetailVisitPVUVData(parameters)
      this.getGoodsDetailVisitStatistics(parameters)
    },

    platformVisitFilterClick(item, index) {
      this.platformVisitSelectedItem = item
    },

    goodsDetailVisitFilterClick(item, index) {
      this.goodsDetailVisitSelectedItem = item
    },

    platformVisitTabChange(index) {
      switch (index) {
        case '1':
          {
            this.updatePlatformVisitData()
          }
          break

        case '2':
          {
            const dateString = this.platformVisitDateString
            const parameters = {
              beginTime: dateString[0],
              endTime: dateString[1]
            }
            this.getPlatformVisitUserDistribution(parameters)
          }
          break

        case '3':
          {
            const dateString = this.platformVisitDateString
            const parameters = {
              beginTime: dateString[0],
              endTime: dateString[1]
            }
            this.getPlatformVisitClientDistribution(parameters)
          }
          break

        default:
          break
      }
    },

    backendVisitTabChange() {},

    handlePlatformVisitUserDistributionTableChange() {},

    handlePlatformVisitClientDistributionTableChange() {},

    orderSalesDateChange(date, dateString) {
      const parameters = {
        beginTime: dateString[0],
        endTime: dateString[1]
      }
      this.getOrderSalesStatistics(parameters)
    },

    orderSalesFilterClick() {},
    backendVisitFilterClick() {}
  }
}
</script>

<style lang="less" scoped>
.circle-cust {
  position: relative;
  top: 28px;
  left: -100%;
}
.extra-wrapper {
  line-height: 55px;
  padding-right: 24px;

  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a {
      margin-left: 24px;
    }
  }
}
.user-statistics-container {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-around;
}

.sales-amount-card-col {
  width: 100% !important;
}

.sales-amount-card {
  width: 100%;
}

.section-header {
  margin-top: 20px;
  margin-left: 20px;
}
.section-header h3 {
  margin-bottom: 0;
}

.platform-visit-col {
  width: 12.5%;
}

.goods-detail-visit-col {
  width: 16.6%;
}

/* 首页访问量统计 */
.head-info {
  position: relative;
  text-align: left;
  padding: 0 32px 0 0;
  min-width: 125px;

  &.center {
    text-align: center;
    padding: 0 32px;
  }

  span {
    color: rgba(0, 0, 0, 0.45);
    display: inline-block;
    font-size: 0.95rem;
    line-height: 42px;
    margin-bottom: 4px;
  }
  p {
    line-height: 42px;
    margin: 0;
    a {
      font-weight: 600;
      font-size: 1rem;
    }
  }
}
</style>

